<template>
	<view>
		<view class="diy-banner-box">
			<swiper class="swiper" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay"
				:interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in itemData.data" :key="index" @click="gotoPages(item)">
					<image :src="item.imgUrl"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="diy-banner-xf ">
			<view class="d-b-c login">
				<view class="photo d-f">
					<image v-if="login" :src="detail.avatarUrl" mode="aspectFill"></image>
					<view class="ml15 d-b-c">你好</view>
				</view>
				
				<button v-if="!login" class="login-btn" @click="gotoLogin()">登录</button>
			</view>
			<view class="d-b-c bg-white" :class="1==2 ? 'br12' : 'br12-b'">
				<view class="banner-xf-box" @click="gotoPage('/'+itemData.params.nav[0].navlinkUrl)">
					<view class="rides">
						<image src="/static/order.png"></image>
					</view>
					<view class="rides_title">{{itemData.params.nav[0].title}}</view>
					<view class="rides_text">{{itemData.params.nav[0].text}}</view>
				</view>
				<view class="banner-xf-box" @click="gotoPage('/'+itemData.params.nav[1].navlinkUrl)">
					<view class="rides">
						<image src="/static/takeout.png"></image>
					</view>
					<view class="rides_title">{{itemData.params.nav[1].title}}</view>
					<view class="rides_text">{{itemData.params.nav[1].text}}</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				indicatorActiveColor: '#ffffff',
				login: false,
				detail: {}
			}
		},
		props: ['itemData'],
		created() {
			this.interval = this.itemData.params.interval;
			this.indicatorActiveColor = this.itemData.style.btnColor;
			if (uni.getStorageSync('token')) {
				this.login = true

				let self = this;
				self._get('user.index/detail', {

				}, function(res) {
					//#ifdef MP-WEIXIN
					if (res.data.getPhone) {
						self.gotoPage('/pages/login/bindmobile');
						return;
					}
					//#endif
					self.detail = res.data.userInfo;
				});
			}

		},

		methods: {

			/*跳转页面*/
			gotoPages(e) {
				this.gotoPage(e.linkUrl);
			},
			gotoLogin() {
				this.gotoPage('/pages/user/index/index')
			}
		}
	}
</script>

<style lang="scss">
	.diy-banner-box,
	.diy-banner-box .swiper {
		width: 750rpx;
		height: 360rpx;
	}

	.diy-banner-box image {
		width: 750rpx;
		height: 360rpx;
	}

	.banner-xf-box {
		// flex: 1;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		width: 320rpx;
		height: 250rpx;
		border-radius: 30rpx;
		// @include background_color("background_color");
	}

	.diy-banner-xf {
		width: 710rpx;
		margin: 0 auto;
		position: relative;
		margin-top: -50rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
		// padding: 20rpx;
		// box-shadow: 0 0 12rpx #CCCCCC;

		.login {
			border-radius: 12rpx 12rpx 0 0;
			padding: 20rpx 30rpx;
			background-color: #2c2f35;
			color: #eacd93;
			font-size: 26rpx;

			.photo image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
			}

			.login-btn {
				border-radius: 40rpx;
				padding: 0 25rpx;
				height: 45rpx;
				line-height: 45rpx;
				background: #eacd93;
			}
		}
	}





	.rides {
		width: 85rpx;
		height: 85rpx;
		margin-bottom: 28rpx;

		image {
			width: 85rpx;
			height: 85rpx;
		}
	}

	.rides_title {
		color: #303133;
		font-weight: 600;
		font-size: 34rpx;

	}

	.rides_text {
		color: #909399;
		font-weight: 400;
		font-size: 20rpx;
	}
</style>
